<template>
  <hips-view
    ref="hipsView"
    :scroll-top="120"
  >
    <div class="logo">
      <img :src="logo">
      <span>Hips</span>
    </div>

    <hips-collapse v-model="active">
      <hips-collapse-item
        v-for="(group, index) in config"
        :key="index"
        :title="group.groupName"
        :name="group.groupName"
      >
        <hips-cell
          v-for="(item, idx) in group.list"
          :key="idx"
          :title="item.title"
          is-link
          @click="toDetail(item)"
        />
      </hips-collapse-item>
    </hips-collapse>
  </hips-view>
</template>

<script>
import { View, NavBar, Collapse, CollapseItem, Cell } from '@hips/vue-ui';

import Logo from '@/assets/logo.png';

import config from '../components';

export default {
  components: {
    [View.name]: View,
    [NavBar.name]: NavBar,
    [Collapse.name]: Collapse,
    [CollapseItem.name]: CollapseItem,
    [Cell.name]: Cell,
  },
  data() {
    return {
      logo: Logo,
      config,
      active: [],
    };
  },  
  methods: {
    toDetail(item) {      
      this.$dsxRouter.push({ path: item.path });
    },
  },
};
</script>

<style scoped lang="stylus">
.logo {
    justify-content: center;
    display: flex;
    align-items: center;
    font-size: 24px;
    padding-top: 18px;

    img {
        width: 42px;
        height: 42px;
        padding: 16px;
    }
}

>>> .hips-collapse-item__wrapper {
  padding 0 10px
}
</style>
